var __assign =
  (this && this.__assign) ||
  function () {
    __assign =
      Object.assign ||
      function (t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
          s = arguments[i];
          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
        }
        return t;
      };
    return __assign.apply(this, arguments);
  };
var __rest =
  (this && this.__rest) ||
  function (s, e) {
    var t = {};
    for (var p in s)
      if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === 'function')
      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
          t[p[i]] = s[p[i]];
      }
    return t;
  };
import React, { useContext, useMemo, useRef } from 'react';
import { Button, Form, Input, Space } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { ConfigsContext } from '../..';
export function ConfigStyle() {
  var _a = useContext(ConfigsContext),
    activeSchema = _a.activeSchema,
    forceRender = _a.forceRender;
  var inputProps = activeSchema.current.configs.inputProps;
  var timeId = useRef(null);
  var defaultStyle = useMemo(function () {
    var style = inputProps.style;
    var styleList = [];
    if (style) {
      for (var _i = 0, _a = Object.entries(style); _i < _a.length; _i++) {
        var _b = _a[_i],
          CSSPropertyName = _b[0],
          value = _b[1];
        styleList.push({ CSSPropertyName: CSSPropertyName, value: value });
      }
    }
    return { styleList: styleList };
  }, []);
  var onValuesChange = function (_, allValues) {
    timeId.current && clearTimeout(timeId.current);
    timeId.current = setTimeout(function () {
      var _a;
      var newStyle =
        (_a = allValues.styleList) === null || _a === void 0
          ? void 0
          : _a.reduce(function (pre, cur) {
              var _a = cur || {},
                CSSPropertyName = _a.CSSPropertyName,
                value = _a.value;
              if (CSSPropertyName && value) {
                pre[CSSPropertyName] = value;
              }
              return pre;
            }, {});
      inputProps.style = newStyle;
      timeId.current = null;
      forceRender();
    }, 500);
  };
  return React.createElement(
    'div',
    null,
    React.createElement('strong', null, 'style\uFF1A'),
    React.createElement(
      Form,
      { onValuesChange: onValuesChange, initialValues: defaultStyle },
      React.createElement(Form.List, { name: 'styleList' }, function (fields, _a) {
        var add = _a.add,
          remove = _a.remove;
        return React.createElement(
          React.Fragment,
          null,
          fields.map(function (_a) {
            var key = _a.key,
              name = _a.name,
              restField = __rest(_a, ['key', 'name']);
            return React.createElement(
              Space,
              { key: key, style: { display: 'flex', marginBottom: 8 }, align: 'baseline' },
              React.createElement(
                Form.Item,
                __assign({}, restField, {
                  name: [name, 'CSSPropertyName'],
                  rules: [{ required: true, message: '请定义CSSPropertyName' }]
                }),
                React.createElement(Input, {
                  prefix: '"',
                  suffix: '"',
                  placeholder: 'CSSPropertyName'
                })
              ),
              React.createElement('span', null, ':'),
              React.createElement(
                Form.Item,
                __assign({}, restField, {
                  name: [name, 'value'],
                  rules: [{ required: true, message: '请定义value' }]
                }),
                React.createElement(Input, { prefix: '"', suffix: '"', placeholder: 'value' })
              ),
              React.createElement(MinusCircleOutlined, {
                onClick: function () {
                  return remove(name);
                }
              })
            );
          }),
          React.createElement(
            Form.Item,
            null,
            React.createElement(
              Button,
              {
                type: 'dashed',
                onClick: function () {
                  return add();
                },
                block: true,
                icon: React.createElement(PlusOutlined, null)
              },
              '\u65B0\u589Estyle\u5C5E\u6027'
            )
          )
        );
      })
    )
  );
}
